import React from "react";
import "./ToggleSwitch.css";
import { useEffect, useState } from 'react'
import axios from 'axios';
import { Table, Space, Card, Breadcrumb, Form, Button, Radio, DatePicker, Select,Modal, Input,message } from 'antd'
const ToggleSwitch = () => {
  const [isOn1, setIsOn1] = useState();
  const [isOn2, setIsOn2] = useState();
  useEffect(() => {
    axios.get('http://localhost:8000/getmaster')
      .then(response => {
        console.log(response.data.list[0].add);
        console.log(response.data.list[0].del);
       setIsOn1(JSON.parse(response.data.list[0].add));
       setIsOn2(JSON.parse(response.data.list[0].del));
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  },[] );
  const toggleSwitch1 = () => {
    const newIsOn1 = !isOn1;
    setIsOn1(newIsOn1);
    console.log(newIsOn1); // 输出更新后的状态值
    axios.post('http://localhost:8000/getmasteradd', { isOn1: newIsOn1 })
      .then(response => {
        console.log(newIsOn1); // 使用更新后的状态值
        console.log(response.data);
        if (newIsOn1) {
          message.success('已开启选课模式');
        }else{
          message.success('已关闭选课模式');
        }
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  };
  
  useEffect(() => {
    console.log(isOn1);
  }, [isOn1]); // 监听 isOn1 的变化

  const toggleSwitch2 = () => {
    const newIsOn2 = !isOn2;
    setIsOn2(newIsOn2);
    console.log(newIsOn2); // 输出更新后的状态值
    axios.post('http://localhost:8000/getmasterdel', { isOn2: newIsOn2 })
      .then(response => {
        console.log(newIsOn2); // 使用更新后的状态值
        console.log(response.data);
        if (newIsOn2) {
          message.success('已开启退课模式');
        }else{
          message.success('已关闭退课模式');
        }
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  };
  
  useEffect(() => {
    console.log(isOn2);
  }, [isOn2]); // 监听 isOn2 的变化
  

  return (
  <div>
    <h2>选课开关：</h2>
    <label className="toggle-switch">
      <input type="checkbox" checked={isOn1} onChange={toggleSwitch1} />
      <span className="slider round"></span>
    </label>
    <br/>
    <br/>
    <h2>退课开关：</h2>
    <label className="toggle-switch">
      <input type="checkbox" checked={isOn2} onChange={toggleSwitch2} />
      <span className="slider round"></span>
    </label>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    
  </div>
  );
};

export default ToggleSwitch;
